import React from 'react'

import './NewsCard.css'
import {getDifferenceBetweenDates} from "../../utils/dateService";

const NewsCard = props => {
    const {news,} = props

    const {title, img: thumb, readnum, createt,} = news

    const imgContainerStyle = {
        borderRadius: '2px',
        width: '30%',
        background: `no-repeat center/cover url(${thumb})`,
    }
    const now = new Date()
    const creatAt = new Date(createt * 1000)
    const minBefore = getDifferenceBetweenDates(creatAt, now).minutesDiff

    return (
        <div
            // style={containerStyle}
            key={title}
            className='news-card'
        >


            <div className='news-card-info flex-space-between flex-column'>
                <p className='news-card-title'>{title}</p>
                <div className='flex-space-between'>
                    {/*<div>*/}
                    {/*    <span className='op-5-c-#333'>{source}</span>*/}
                    {/*</div>*/}
                    <div>
                        {/*<span className='op-5-c-#333'>Youtoball-球必应</span>*/}
                        <p className='gray-text'>{readnum} 阅读 | {minBefore}分钟前</p>
                    </div>
                    {/*<div>*/}
                    {/*    <img src={FireIcon} alt='' style={{marginRight: '0.2rem', opacity: 1,}}/>*/}
                    {/*    <span className='op-5-c-#333'>{hot}</span>*/}
                    {/*</div>*/}
                </div>
            </div>

            <div
                className='news-card-img'
                style={imgContainerStyle}
            />

        </div>
    )
}

export default NewsCard
